<template>
  <div class="userinfo">
    <div>
      <div class="img">
        <img :src="avatar" />
        <div class="role" v-if="role"><span>{{role}}</span></div>
        <Tooltip content="编辑" class="edit" placement="right" v-if="isHandle">
          <Icon type="ios-cog" @click.native="handleEdit"></Icon>
        </Tooltip>
        <Tooltip content="删除" class="del edit" placement="right" v-if="isHandle">
          <Icon type="ios-close" @click.native="handleEdit"></Icon>
        </Tooltip>

      </div>
      <div class="name">
        <Icon type="woman" class="woman" v-if="sex === 0"></Icon>
        <Icon type="man" class="man" v-if="sex === 1"></Icon>
        {{name}}
      </div>
      <div class="num" style="color: #888;" v-if="num">
        账号 {{num}}
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    props: {
      isHandle: {
        type: Boolean,
        default: false
      },
      avatar: String,
      role: String,
      sex: Number,
      name: String,
      num: String
    },
    methods: {
      handleEdit() {

      }
    }
  }
</script>
<style scoped>
  .userinfo{
    width: 100%;
    height: 150px;
    padding: 10px 0px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }
  .userinfo>div{
    height: 130px;
    border-radius: 10px;
    background: #fff;
  }
  .userinfo>div:hover{
    background: #f6f8ea;
  }
  .userinfo .img{
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0px auto;
    text-align: center;
  }
  .userinfo .img img{
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0px auto;
  }
  .userinfo .img .role{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
  }
  .userinfo .img .role span{
    display: inline-block;
    padding: 0px 10px;
    line-height: 16px;
    color: #fff;
    background: #ed3f14;
    border-radius: 10px;
    font-size: 10px;
  }
  .userinfo .img .edit{
    position: absolute;
    right: -10px;
    top: 5px;
    font-size: 20px;
    display: none;
    width: 20px;
    color: #ff9900;
  }
  .userinfo .img .del{
    top: 28px;
    color: #ed3f14;
    font-size: 18px;
  }
  .userinfo:hover .img .edit{
    display: block;
  }
  .woman{
    color: #fd999b;
    font-size: 14px;
  }
  .man{
    color: #9bcdfd;font-size: 14px;
  }
</style>
